<!doctype html>
<html>
  <head>
    <title>欢迎登陆风流</title>
    <meta charset="utf-8">
      <style>
            body { background:#daf1fd;
                 }
            .bg {
                position: left;
               
                left:999px;
                width:225px;
              	list-style:none;
               	display:block;
               	white-space:nowrap;
                   font-size:13px;	
                }
           input{
            	width:200px;
            	} 

            .zb{color:black;
             	font-family: 宋体;
          	    float:right;
          	    float:top;
                border-radius: 1px;
             	list-style:none;
            	border:1px solid #def2ff;
                border-radius: 10px;
          		display:inline;
         		background:#abd2ec;
         		white-space:nowrap;
                }
           	#center{
           		width :300px;
           		background:#abd2ec;
           		height:360px;
           		border:2px solid white;
             	border-radius: 20px;  
           		text-align:center;
            	
            	position:absolute;  
             	top:50%;  
               	left:50%;  
 				-webkit-transform:translate(-50%,-50%);  
  				-moz-transform:？(-50%,-50%);  
  				transform:？(-50%,-50%);  /*以上6行代码让主框架居中*/
	            white-space:auto;
    	        padding:10px 10px 10px 10px;
        		   }
           	.w-after{
           		float:left;
                font-size: 45px;
                display:block;
                line-height:0px;
                color:#0f88eb;
                }	
          
           
            
            .wbk{ 
                background-color:#f7fafc;
             	height: 40px;
                }
            p   {
            	font-size:30px;
               	margin-bottom: 10px;}

            .botton{ 
            	border:10px solid #0f88eb;
               	background-color:#0f88eb;
               	border-radius: 10px;
               	line-height:50px;
               	font-size:20px;
               	cursor:pointer; width:50px;
               
               	 color:#f7fafc; 
               	 text-decoration: none;
               }
      </style>

  </head>
  <body>


     <div class="w">
      
      <ul >
        <li class="zb"><u>关于我们</u></li>
        <li class="zb"><u>加入风流</u></li>
        <li class="zb"><u>帮助中心</u></li>
        <li class="zb"><u>免责声明</u></li>
        <li class="zb"><u>联系我们</u></li>
      </ul>
      
     </div>
  <div class="q">

     <div id="center">
     	<p>登&nbsp;&nbsp;&nbsp;陆</p><br>
     	
     	<ul class="bg">

     	<li class="bg"><input name="name" id="name" type="text" placeholder="输入用户名" value="" class="wbk" ></li>
     	<li class="bg"><input id="password" type="password" value="" placeholder="输入密码" class="wbk" ></li>
         <br>&zwj;<br>

       <input type="button"   onclick="find()" alt="" value="登陆"></ul>

     </ul>
     <span>还未注册?<a href="pp.html">立即注册</a></span>
 

     </div>
</div>
       <p class="w-after">风流工作室</p>
 

  <script type="text/javascript">
  //自己编的js调了好多天还是没达到想要的效果。。这期作业先套用别人的模板。。。最近太忙了。。。有时间再自己写一份提交上来
          

    function find() {
        var password=document.getElementById("password").value;


        var s=document.getElementById("name").value;
        var atr=localStorage.getItem(s);
        if(atr==null){
            alert("提示\n\n用户名不存在");
            return false;
      }
      else {
                for (var i = 0; i < localStorage.length; i++) {
                    var sitename = localStorage.key(i);
                    var str = localStorage.getItem(sitename);

                    if (typeof str === 'string') {
                        var site = JSON.parse(str)
                    }

                    if (atr == str) {
                        break;
                    }


                }
                if (password !=site.password){
                    alert("提示\n\n密码错误");
                    return false;
                }





                sessionStorage.username = s;
                window.location.href = 'http://indianxiaohao.gitee.io/ugi/success.html';
            }


        }
  </script>


  </body>
</html>